<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
// vuex
import { useStore } from '@/store/index'
// api 
import { getCode, loginByToken } from '@/api/ApiPath'
// 表单 - 导入
import { ElButton, ElCol, ElForm, ElFormItem, ElInput, ElLoading, ElRow } from 'element-plus'
// 初始化数据
const store = useStore()

// 表单内容
const ruleForm = reactive({
  // 账号
  username: 'admin',
  // 密码
  password: '123456',
  // 验证码id
  uuid: '',
  // 验证码答案
  verifyCode: ''
})
// 效验表单
const rules = reactive({
  username: [
    {
      requred: true,
      message: '账号不能为空,请输入账号!',
      trigger: 'blur'
    },
    {
      pattern: /^[a-zA-Z0-9]{2,10}$/,
      message: '请输入2-10的字母或者数字',
      trigger: 'blur'
    }
  ],
  password: [
    {
      requred: true,
      message: '账号不能为空,请输入账号!',
      trigger: 'blur'
    },
  ],
  uuid: [
    {
      requred: true,
      message: 'uuid不能为空,请输入uuid!',
      trigger: 'blur'
    },
  ],
  verifyCode: [
    {
      requred: true,
      message: 'verifyCode不能为空,请输入verifyCode!',
      trigger: 'blur'
    },
  ],
})
// 验证码图片
const verifyUrl = ref<string>()
// uuid
// 获取验证码图片
const getVerifyUrl = () => {
  getCode().then(res => {
    verifyUrl.value = res.data.image
    ruleForm.uuid = res.data.uuid
  })
}
onMounted(() => {
  getVerifyUrl()
  handleToken()
})
// token 登录
const handleToken = () => {
  const token = localStorage.getItem('token')
  if (token != null) {
    store.dispatch('authState/loginByToken', token)
  }
}
// 登录按钮
const handleLogin = () => {
  store.dispatch('authState/login', ruleForm)
  getVerifyUrl()
}
</script>
<template>
  <div class='login'>
    <el-row>
      <el-col :span="16">
        <div class="letf">
        </div>
      </el-col>
      <el-col :span="8">
        <div class="right">
          <div class="logo">
            <img src="@/assets/vue.svg" alt="">
          </div>
          <div class="login_from">
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
              class="demo-ruleForm">
              <!-- 账号 -->
              <el-form-item label="username" prop="username">
                <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
              </el-form-item>
              <!-- 密码 -->
              <el-form-item label="password" prop="password">
                <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
              </el-form-item>
              <!-- uuid -->
              <el-form-item label="verifyCode" prop="verifyCode" class="uuid">
                <el-input v-model="ruleForm.verifyCode" type="text" autocomplete="off" style="width: 100px;">
                </el-input>
                <span @click="getVerifyUrl" v-if="!verifyUrl" class="verifyUrl-span">获取验证码</span>
                <img @click="getVerifyUrl" :src="verifyUrl" alt="" v-else class="verifyUrl">
              </el-form-item>
              <!-- verifyCode -->
              <el-form-item>
                <el-button type="primary" @click="handleLogin">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style lang='less' scoped>
.letf {
  width: 100%;
  height: 100vh;
  background-color: #409eff;
}

.right {
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  display: flex;
  height: 100vh;
  overflow: hidden;

  .logo {
    text-align: center;
    width: 200px;
    height: 200px;

    img {
      width: 200px;
      height: 200px;
    }
  }
}

.uuid {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.verifyUrl {
  height: 32px;
  cursor: pointer;
}

.verifyUrl-span {
  color: #409eff;
  text-align: right;
  cursor: pointer;
  margin-left: 15px;
}
</style>